<div class="tlp-form-element">
    <label class="tlp-label" for="types">Types</label>
    <select class="tlp-select" id="types" name="types[]" multiple>
        <option value="saucer">Saucer</option>
        <option value="spheroid">Spheroid</option>
        <option value="triangular">Triangular</option>
        <option value="cigar">Cigar</option>
        <option value="ovoid">Ovoid</option>
    </select>
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="types-adjusted">Types adjusted</label>
    <select class="tlp-select tlp-select-adjusted" id="types-adjusted" name="types[]" multiple>
        <option value="saucer">Saucer</option>
        <option value="spheroid">Spheroid</option>
        <option value="triangular">Triangular</option>
        <option value="cigar">Cigar</option>
        <option value="ovoid">Ovoid</option>
    </select>
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="types-help">Types help</label>
    <select class="tlp-select" id="types-help" name="types[]" multiple>
        <option value="saucer">Saucer</option>
        <option value="spheroid">Spheroid</option>
        <option value="triangular">Triangular</option>
        <option value="cigar">Cigar</option>
        <option value="ovoid">Ovoid</option>
    </select>
    <p class="tlp-text-info"><i class="fa fa-life-saver"></i> Hey bro', I'm a help text. I'm here to help you.</p>
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="types-mandatory">Types mandatory <i class="fa fa-asterisk"></i></label>
    <select class="tlp-select" id="types-mandatory" name="types[]" multiple>
        <option value="saucer">Saucer</option>
        <option value="spheroid">Spheroid</option>
        <option value="triangular">Triangular</option>
        <option value="cigar">Cigar</option>
        <option value="ovoid">Ovoid</option>
    </select>
</div>

<div class="tlp-form-element tlp-form-element-disabled">
    <label class="tlp-label" for="types-disabled">Types</label>
    <select class="tlp-select" id="types-disabled" name="types[]" multiple disabled>
        <option value="saucer">Saucer</option>
        <option value="spheroid">Spheroid</option>
        <option value="triangular">Triangular</option>
        <option value="cigar">Cigar</option>
        <option value="ovoid">Ovoid</option>
    </select>
</div>

<div class="tlp-form-element tlp-form-element-error">
    <label class="tlp-label" for="types-error">Types</label>
    <select class="tlp-select" id="types-error" name="types[]" multiple>
        <option value="saucer">Saucer</option>
        <option value="spheroid">Spheroid</option>
        <option value="triangular">Triangular</option>
        <option value="cigar">Cigar</option>
        <option value="ovoid">Ovoid</option>
    </select>
    <p class="tlp-text-danger">Oops, it seems you missed something <i class="fa fa-frown-o"></i></p>
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="types-small">Types small</label>
    <select class="tlp-select tlp-select-small" id="types-small" name="types[]" multiple>
        <option value="saucer">Saucer</option>
        <option value="spheroid">Spheroid</option>
        <option value="triangular">Triangular</option>
        <option value="cigar">Cigar</option>
        <option value="ovoid">Ovoid</option>
    </select>
</div>

<div class="tlp-form-element">
    <label class="tlp-label" for="types-large">Types large</label>
    <select class="tlp-select tlp-select-large" id="types-large" name="types[]" multiple>
        <option value="saucer">Saucer</option>
        <option value="spheroid">Spheroid</option>
        <option value="triangular">Triangular</option>
        <option value="cigar">Cigar</option>
        <option value="ovoid">Ovoid</option>
    </select>
</div>
